// 引入createApp
import { createApp } from "vue";

// 引入 createDiscreteApi
import { createDiscreteApi } from 'naive-ui'

// 引入App.vue
import App from './App.vue';  

// 引入路由
import router from '@/router';   // index.js可以省略

// 引入store
import store from './store';

// 引入Normalize.css
import 'normalize.css';
// 引入全局样式
import '@/assets/global.scss' 

// 调用createDiscreteApi 得到 message 方法
const { message } = createDiscreteApi(['message'])
// setTimeout(() => {
//     message.success('hello world')
// }, 1000);

 // 创建应用实例
const app = createApp(App) 

// 为了避免在组件中频繁调用 createDiscreteApi,这里可以将调用之后的message直接挂载到全局上
app.config.globalProperties.$message = message;  //之后就可以通过 this.$message 来使用message了

// 怎么给this 身上加东西？
// vue2   Vue.prototype.xxx
// vue3   app.config.globalProperties.xxx

// 注册store
app.use(store)
// store 里面有一个install函数，这个函数内部 就给app.config.globalProperties.xxx  上面加了一个 $store 属性，所以我们可以用this.$store 拿到store里面的属性；

// 注册路由
app.use(router);

// 挂载应用
app.mount("#app");



/**
 * app.use(store)  注册使用Vuex之后，有什么效果
 * 
 * 1. 全局写入了 $store 属性，该属性就是 store 的实例对象，即store/index.js里面的路由实例对象store
 * 
 * commit()  提交mutations 的
 * dispatch()  派发action 的
 * state    仓库的数据
 * getters   仓库的getters数据
 */